<template>
	<div class="page" id="dataScreen">
		<!-- <el-button class="test" @click="setCenter"></el-button> -->
		<!-- <div class="backgrountMap">
			<div id='allmap' >
				<baidu-map scroll-wheel-zoom :center="mapCenter" :zoom="12" @ready='mapReady' class="map" map-type="BMAP_HYBRID_MAP">
					<my-overlay @overClick='overClick' :ref="'overlay'+index" v-for="(item,index) in overlayList" :key="index" :position="item" :text="item.name" :active="false" @mouseover.native="active = true" @mouseleave.native="active = false">
					</my-overlay>
				</baidu-map>
			</div>
		</div> -->
		<div class="bg flex-center">
			<img class="bgbg" mode='widthFix' src="@/assets/icon/dataScreen/bg.png" alt="" />
			<div class="bgMap" @click="mpopIndex = 0">
				<div v-if="bgMapStatus ==0">
					<div class="m1 flex-row cursor" @click.stop="mpopIndex = 1">
						<img style="height:0.3rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh.png" alt="" />
						<div class="mF flex-center"> 天生街道</div>
						<div class="mpop" v-if="mpopIndex == 1">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh2.png" alt="" />
								<div class="mpF flex-center"> 天生街道 24件</div>
							</div>
							<div class="mpF2 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">处置中事件：</span>18件</div>
							</div>
						</div>
					</div>
					<div class="m2 flex-row cursor" @click.stop="mpopIndex = 2">
						<img style="height:0.3rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh.png" alt="" />
						<div class="mF flex-center"> 东阳街道 </div>
						<div class="mpop" v-if="mpopIndex == 2">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh2.png" alt="" />
								<div class="mpF flex-center"> 东阳街道 16件</div>
							</div>
							<div class="mpF2 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">处置中事件：</span>12件</div>
							</div>
						</div>
					</div>
					<div class="m3 flex-row cursor" @click.stop="mpopIndex = 3">
						<img style="height:0.3rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh.png" alt="" />
						<div class="mF flex-center"> 蔡家岗街道 </div>
						<div class="mpop" v-if="mpopIndex == 3">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh2.png" alt="" />
								<div class="mpF flex-center"> 蔡家岗街道 12件</div>
							</div>
							<div class="mpF2 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">处置中事件：</span>8件</div>
							</div>
						</div>
					</div>
					<div class="m4 flex-row cursor" @click.stop="mpopIndex = 4">
						<img style="height:0.3rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh.png" alt="" />
						<div class="mF flex-center"> 复兴街道</div>
						<div class="mpop" v-if="mpopIndex == 4">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/wh2.png" alt="" />
								<div class="mpF flex-center"> 复兴街道 9件</div>
							</div>
							<div class="mpF2 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">处置中事件：</span>5件</div>
							</div>
						</div>
					</div>
				</div>
				<div v-if="bgMapStatus ==11">
					<div class="m1 flex-row cursor" :style="{bottom:item.bottom,left: item.left}" v-for="(item,index) in bgMapStatus11List" :key="index" @click.stop="mpopIndex = (index+1)">
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/cs3.png" alt="" />
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex == (index+1)" src="@/assets/icon/dataScreen3/cs4.png" alt="" />
						<div class="mpop2" v-if="mpopIndex == (index+1)">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/cs4.png" alt="" />
								<div class="mpF_Status11 flex-center"> {{item.name}}</div>
							</div>
							<div class="mpF2_Status11 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">地理位置：</span> {{item.address}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">坐标：</span> {{Number(item.lat).toFixed(2)}},{{Number(item.lng).toFixed(2)}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">投运日期：</span>{{item.time}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">运营单位：</span>{{item.unit}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">联系方式：</span>{{item.phone}}</div>
							</div>
						</div>
					</div>
				</div>
				<div v-if="bgMapStatus ==12">
					<div class="m1 flex-row cursor" :style="{bottom:item.bottom,left: item.left}" v-for="(item,index) in bgMapStatus11List2" :key="index" @click.stop="mpopIndex = (index+1)">
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/xz3.png" alt="" />
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex == (index+1)" src="@/assets/icon/dataScreen3/xz4.png" alt="" />
						<div class="mpop2" v-if="mpopIndex == (index+1)">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/xz4.png" alt="" />
								<div class="mpF_Status11 flex-center"> {{item.name}}</div>
							</div>
							<div class="mpF2_Status11 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">地理位置：</span> {{item.address}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">坐标：</span> {{Number(item.lat).toFixed(2)}},{{Number(item.lng).toFixed(2)}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">投运日期：</span>{{item.time}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">运营单位：</span>{{item.unit}}</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">联系方式：</span>{{item.phone}}</div>
							</div>
						</div>
					</div>
				</div>
				<div v-if="bgMapStatus ==13">
					<div class="m1 flex-row cursor" :style="{bottom:item.bottom,left: item.left}" v-for="(item,index) in bgMapStatus11List3" :key="index" @click.stop="mpopIndex = (index+1)">
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/ythss3.png" alt="" />
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex == (index+1)" src="@/assets/icon/dataScreen3/ythss4.png" alt="" />
						<div class="mpop2" v-if="mpopIndex == (index+1)">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/ythss4.png" alt="" />
								<div class="mpF_Status11 flex-center"> 污水处理厂名称</div>
							</div>
							<div class="mpF2_Status11 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">地理位置：</span> 北碚区-北温泉街道云清路</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">坐标：</span> 东经106°18′14″-106°56′53″ 北纬29°39′00″-30°03′</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">投运日期：</span>2025年4月8日</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">运营单位：</span>北培区政府</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">联系方式：</span>17748475478</div>
							</div>
						</div>
					</div>
				</div>
				<div v-if="bgMapStatus ==2">
					<div class="m1 flex-row cursor" :style="{bottom:item.bottom,left: item.left}" v-for="(item,index) in bgMapStatus11List4" :key="index" @click.stop="mpopIndex = (index+1)">
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/tsbz3.png" alt="" />
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex == (index+1)" src="@/assets/icon/dataScreen3/tsbz4.png" alt="" />
						<div class="mpop2" v-if="mpopIndex == (index+1)">
							<div class="flex-row">
								<img style="height:0.34rem" mode='heightFix' src="@/assets/icon/dataScreen3/tsbz4.png" alt="" />
								<div class="mpF_Status11 flex-center"> 泵站名称</div>
							</div>
							<div class="mpF2_Status11 flex-column ">
								<div><span style="color:rgba(255, 255, 255, 0.6)">地理位置：</span> 北碚区-北温泉街道云清路</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">坐标：</span> 东经106°18′14″-106°56′53″ 北纬29°39′00″-30°03′</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">泵站规格：</span>100m³</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">管理单位：</span>北培区政府</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">建设日期：</span>2023年2月18日</div>
								<div><span style="color:rgba(255, 255, 255, 0.6)">巡检日期：</span>2025年4月8日</div>
							</div>
						</div>
					</div>
				</div>
				<div v-if="bgMapStatus ==4">
					<div @click="block6_2 = true" class="m1 flex-row cursor" :style="{bottom:item.bottom,left: item.left}" v-for="(item,index) in bgMapStatus11List5" :key="index" @click.stop="mpopIndex = (index+1)">
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/sxt3.png" alt="" />
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex == (index+1)" src="@/assets/icon/dataScreen3/sxt4.png" alt="" />

					</div>
				</div>
				<div v-if="bgMapStatus ==5">
					<div class="m1 flex-row cursor" :style="{bottom:item.bottom,left: item.left}" v-for="(item,index) in bgMapStatus11List6" :key="index" @click.stop="mpopIndex = (index+1)">
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/swjcy3.png" alt="" />
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex == (index+1)" src="@/assets/icon/dataScreen3/swjcy4.png" alt="" />

					</div>
				</div>
				<div v-if="bgMapStatus ==6">
					<div class="m1 flex-row cursor" :style="{bottom:item.bottom,left: item.left}" v-for="(item,index) in bgMapStatus11List7" :key="index" @click.stop="mpopIndex = (index+1)">
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/swj3.png" alt="" />
						<img style="height:0.43rem" mode='heightFix' v-if="mpopIndex == (index+1)" src="@/assets/icon/dataScreen3/swj4.png" alt="" />

					</div>
				</div>
			</div>
		</div>
		<div class="content" v-if="true">
			<div class="top">
				<div class="t1">污水设施抢险智管</div>
				<div class="timeWrap flex-row flex-alignCenter">
					<img style="height:0.39rem;margin-right:0.1rem" mode='heightFix' src="@/assets/icon/dataScreen3/time.png" alt="" />
					<div style="font-size: 0.36rem;color: #C1D2F1;">{{creatTime}}</div>
					<div style="font-size: 0.15rem;color: #C1D2F1;margin-left:0.1rem" class="flex-column flex-justCenter">
						<div>{{ currentWeekday }}</div>
						<div>{{new Date().format("yyyy.MM.dd")}}</div>
					</div>
				</div>
				<div class="datepicker">
					<!-- <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="dataParams.date" align="right" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" @change="initData">
					</el-date-picker> -->
				</div>
			</div>
			<div class="left flex-column">
				<div class="block1">
					<div class="title flex-between">
						基础信息纳管
						<!-- <div class="flex-row" style="margin-top:0.05rem">
							<div class="flex-justCenter " :class="b1ButtonIndex1==1?'b1':'b2'" @click="b1ButtonIndex1=1">近30天</div>
							<div class="flex-justCenter " :class="b1ButtonIndex1==2?'b1':'b2'" @click="b1ButtonIndex1=2">近90天</div>
							<div class="flex-justCenter " :class="b1ButtonIndex1==3?'b1':'b2'" @click="b1ButtonIndex1=3">全年</div>

						</div> -->
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="flex-center" :class="b1ButtonIndex8==1?'jx2':'jx4'" @click="b1ButtonIndex8=1">管网</div>
						<div class="flex-center" :class="b1ButtonIndex8==2?'jx3':'jx1'" @click="b1ButtonIndex8=2;bgMapStatus =11">设施</div>
						<div class="flex-center" :class="b1ButtonIndex8==3?'jx3':'jx1'" @click="b1ButtonIndex8=3;bgMapStatus =4">设备</div>
						<div class="flex-center" :class="b1ButtonIndex8==4?'jx3':'jx1'" @click="b1ButtonIndex8=4">河流</div>
						<div class="flex-center" :class="b1ButtonIndex8==5?'jx3':'jx1'" @click="b1ButtonIndex8=5;bgMapStatus =2">其他</div>

					</div>
					<div v-if="b1ButtonIndex8==1">
						<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
							<div class="flex-row flex-alignCenter">
								<div class="b12"></div>
								<div class="f33">管网总公里数</div>
							</div>
							<div class="flex-row" style="margin-top:0.05rem">
								<div class="flex-center " :class="b1ButtonIndex4==1?'ysgw1':'ysgw2'" @click="b1ButtonIndex4=1">雨水管网</div>
								<div class="flex-center " :class="b1ButtonIndex4==2?'ysgw1':'ysgw2'" @click="b1ButtonIndex4=2">污水管网</div>
							</div>
						</div>
						<div class="flex-row" style="margin-top:0.14rem">
							<div class="cursor" style="margin-right:0.1rem" @click="b1ButtonIndex9=1">
								<div class="b22 flex-center" :class="b1ButtonIndex9==1?'b22_2':'b22'">0-5年</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex9==1?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex9==1" src="@/assets/icon/dataScreen3/gw2.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/gw1.png" alt="" />
									<div>
										116<span style="font-size: 0.14rem;color: #C0C0C0;">公里</span>
									</div>
								</div>
							</div>

							<div class="cursor" style="margin-right:0.14rem" @click="b1ButtonIndex9=2">
								<div class="b22 flex-center" :class="b1ButtonIndex9==2?'b22_2':'b22'">5-10年</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex9==2?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex9==2" src="@/assets/icon/dataScreen3/gw2.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/gw1.png" alt="" />
									<div>
										73<span style="font-size: 0.14rem;color: #C0C0C0;">公里</span>
									</div>
								</div>
							</div>
							<div class="cursor" style="margin-right:0rem" @click="b1ButtonIndex9=3">
								<div class="b22 flex-center" :class="b1ButtonIndex9==3?'b22_2':'b22'">10年以上</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex9==3?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex9==3" src="@/assets/icon/dataScreen3/gw2.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/gw1.png" alt="" />
									<div>
										23<span style="font-size: 0.14rem;color: #C0C0C0;">公里</span>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div v-if="b1ButtonIndex8==2">
						<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
							<div class="flex-row flex-alignCenter">
								<div class="b12"></div>
								<div class="f33">污水处理厂</div>
							</div>
						</div>
						<div class="flex-row" style="margin-top:0.14rem">
							<div class="cursor" style="margin-right:0.1rem" @click="b1ButtonIndex10=1;bgMapStatus ==11?bgMapStatus =0:bgMapStatus =11">
								<div class="b22 flex-center" :class="b1ButtonIndex10==1?'b22_2':'b22'">城市厂</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex10==1?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex10==1" src="@/assets/icon/dataScreen3/cs6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/cs5.png" alt="" />
									<div>
										3<span style="font-size: 0.14rem;color: #C0C0C0;">座</span>
									</div>
								</div>
							</div>

							<div class="cursor" style="margin-right:0.14rem" @click="b1ButtonIndex10=2;bgMapStatus ==12?bgMapStatus =0:bgMapStatus =12">
								<div class="b22 flex-center" :class="b1ButtonIndex10==2?'b22_2':'b22'">乡镇厂</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex10==2?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex10==2" src="@/assets/icon/dataScreen3/xz6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/xz5.png" alt="" />
									<div>
										8<span style="font-size: 0.14rem;color: #C0C0C0;">座</span>
									</div>
								</div>
							</div>
							<div class="cursor" style="margin-right:0rem" @click="b1ButtonIndex10=3;bgMapStatus ==13?bgMapStatus =0:bgMapStatus =13">
								<div class="b22 flex-center" :class="b1ButtonIndex10==3?'b22_2':'b22'">一体化设施</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex10==3?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex10==3" src="@/assets/icon/dataScreen3/ythss6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/ythss5.png" alt="" />
									<div>
										1<span style="font-size: 0.14rem;color: #C0C0C0;">座</span>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div v-if="b1ButtonIndex8==3">
						<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
							<div class="flex-row flex-alignCenter">
								<div class="b12"></div>
								<div class="f33">设备</div>
							</div>
						</div>
						<div class="flex-row" style="margin-top:0.14rem">
							<div class="cursor" style="margin-right:0.1rem" @click="b1ButtonIndex11=1;bgMapStatus ==4?bgMapStatus =0:bgMapStatus =4">
								<div class="b22 flex-center" :class="b1ButtonIndex11==1?'b22_2':'b22'">摄像头</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex11==1?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex11==1" src="@/assets/icon/dataScreen3/sxt6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/sxt5.png" alt="" />
									<div>
										9<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>

							<div class="cursor" style="margin-right:0.14rem" @click="b1ButtonIndex11=2;bgMapStatus ==5?bgMapStatus =0:bgMapStatus =5">
								<div class="b22 flex-center" :class="b1ButtonIndex11==2?'b22_2':'b22'">水位检测仪</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex11==2?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex11==2" src="@/assets/icon/dataScreen3/swjcy6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/swjcy5.png" alt="" />
									<div>
										6<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>
							<div class="cursor" style="margin-right:0rem" @click="b1ButtonIndex11=3;bgMapStatus ==6?bgMapStatus =0:bgMapStatus =6">
								<div class="b22 flex-center" :class="b1ButtonIndex11==3?'b22_2':'b22'">水位计</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex11==3?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex11==3" src="@/assets/icon/dataScreen3/swj6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/swj5.png" alt="" />
									<div>
										10<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div v-if="b1ButtonIndex8==4">
						<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
							<div class="flex-row flex-alignCenter">
								<div class="b12"></div>
								<div class="f33">河流</div>
							</div>

						</div>
						<div class="flex-row" style="margin-top:0.14rem">
							<div class="cursor" style="margin-right:0.1rem" @click="b1ButtonIndex12=1">
								<div class="b22 flex-center" :class="b1ButtonIndex12==1?'b22_2':'b22'">河道</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex12==1?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex12==1" src="@/assets/icon/dataScreen3/hd4.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/hd3.png" alt="" />
									<div>
										16<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>

							<div class="cursor" style="margin-right:0.14rem" @click="b1ButtonIndex12=2">
								<div class="b22 flex-center" :class="b1ButtonIndex12==2?'b22_2':'b22'">干流</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex12==2?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex12==2" src="@/assets/icon/dataScreen3/hd4.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/hd3.png" alt="" />
									<div>
										24<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>
							<div class="cursor" style="margin-right:0rem" @click="b1ButtonIndex12=3">
								<div class="b22 flex-center" :class="b1ButtonIndex12==3?'b22_2':'b22'">支流</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex12==3?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex12==3" src="@/assets/icon/dataScreen3/hd4.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/hd3.png" alt="" />
									<div>
										42<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>

						</div>
					</div>
					<div v-if="b1ButtonIndex8==5">
						<div class="flex-between flex-alignCenter" style="margin-top:0.1rem">
							<div class="flex-row flex-alignCenter">
								<div class="b12"></div>
								<div class="f33">其他</div>
							</div>
						</div>
						<div class="flex-row" style="margin-top:0.14rem">
							<div class="cursor" style="margin-right:0.1rem" @click="b1ButtonIndex13=1;bgMapStatus ==2?bgMapStatus =0:bgMapStatus =2">
								<div class="b22 flex-center" :class="b1ButtonIndex13==1?'b22_2':'b22'">提升泵站</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex13==1?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex13==1" src="@/assets/icon/dataScreen3/tsbz6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/tsbz5.png" alt="" />
									<div>
										19<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>

							<div class="cursor" style="margin-right:0.14rem" @click="b1ButtonIndex13=2">
								<div class="b22 flex-center" :class="b1ButtonIndex13==2?'b22_2':'b22'">排水口</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex13==2?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex13==2" src="@/assets/icon/dataScreen3/psk6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/psk5.png" alt="" />
									<div>
										125<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>
							<div class="cursor" style="margin-right:0rem" @click="b1ButtonIndex13=3">
								<div class="b22 flex-center" :class="b1ButtonIndex13==3?'b22_2':'b22'">河流断面</div>
								<div class="b222 flex-center flex-column" :class="b1ButtonIndex13==3?'b222_2':'b222'">
									<img style="width:0.28rem;" mode='widthFix' v-if="b1ButtonIndex13==3" src="@/assets/icon/dataScreen3/hldm6.png" alt="" />
									<img style="width:0.28rem;" mode='widthFix' v-else src="@/assets/icon/dataScreen3/hldm5.png" alt="" />
									<div>
										125<span style="font-size: 0.14rem;color: #C0C0C0;">个</span>
									</div>
								</div>
							</div>

						</div>
					</div>

				</div>
				<div class="block2">
					<div class="title flex-between">
						问题全面感知
						<div class="flex-row" style="margin-top:0.05rem">
							<div class="flex-justCenter " :class="b1ButtonIndex1==1?'b1':'b2'" @click="b1ButtonIndex1=1">近30天</div>
							<div class="flex-justCenter " :class="b1ButtonIndex1==2?'b1':'b2'" @click="b1ButtonIndex1=2">近90天</div>
							<div class="flex-justCenter " :class="b1ButtonIndex1==3?'b1':'b2'" @click="b1ButtonIndex1=3">全年</div>

						</div>
					</div>
					<div class="b17 flex-row flex-center">
						<div style="margin-right:0.4rem">
							推送事件数
						</div>
						<div class="" style="font-size: 0.2rem;">172件</div>
					</div>
					<div class="flex-row" style="margin-top:0.1rem">
						<div class="flex-row flex-alignCenter" style="margin-right:0.2rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/hfcjg.png" alt="" />
							<div class="flex-column ">
								<div class="b18">化粪池监管</div>
								<div class="f3">57件</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter" style="margin-right:0.1rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/skznxj.png" alt="" />
							<div class="flex-column ">
								<div class="b18">水库智能巡检</div>
								<div class="f3">29件</div>
							</div>
						</div>

					</div>
					<div class="flex-row" style="margin-top:0.1rem">
						<div class="flex-row flex-alignCenter" style="margin-right:0.2rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/xyzbzhzl.png" alt="" />
							<div class="flex-column ">
								<div class="b18">校园周边综合治理</div>
								<div class="f3">44件</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter" style="margin-right:0.1rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/slfh.png" alt="" />
							<div class="flex-column ">
								<div class="b18">森林防火</div>
								<div class="f3">38件</div>
							</div>
						</div>

					</div>
					<div class="b17 flex-row flex-center">
						<div style="margin-right:0.4rem">
							接收事件数
						</div>
						<div class="" style="font-size: 0.2rem;">149件</div>
					</div>
					<div class="flex-row" style="margin-top:0.1rem">
						<div class="flex-row flex-alignCenter" style="margin-right:0.2rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/zhhc.png" alt="" />
							<div class="flex-column ">
								<div class="b18">智慧河长</div>
								<div class="f3">32件</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter" style="margin-right:0.1rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/mwwh.png" alt="" />
							<div class="flex-column ">
								<div class="b18">民为我呼</div>
								<div class="f3">43件</div>
							</div>
						</div>

					</div>
					<div class="flex-row" style="margin-top:0.1rem">
						<div class="flex-row flex-alignCenter" style="margin-right:0.2rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/zhhb.png" alt="" />
							<div class="flex-column ">
								<div class="b18">智慧环保</div>
								<div class="f3">25件</div>
							</div>
						</div>
						<div class="flex-row flex-alignCenter" style="margin-right:0.1rem">
							<img style="width:0.65rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/byzs.png" alt="" />
							<div class="flex-column ">
								<div class="b18">巴渝治水</div>
								<div class="f3">47件</div>
							</div>
						</div>

					</div>
				</div>
				<div class="block2_2">
					<div class="title flex-between">
						预警&天气
					</div>
					<div class="b21 flex-center">风险预警等级：<span style="font-weight: bold;font-size: 0.2rem;color: #2BB7FF;">较低</span></div>
					<!-- <img style="width:4.18rem;margin-top:0.2rem" mode='widthFix' v-if="mpopIndex != (index+1)" src="@/assets/icon/dataScreen3/test1.png" alt="" /> -->
					<div class="flex-row flex-alignCenter weatherWrap" style="margin-top:0.1rem;color:#fff">
						<div class="qingWrap flex-center">
							<img style="width:0.42rem;" mode='widthFix' v-if="weatherData.info == '冰雹'" src="@/assets/icon/dataScreen3/bb.png" alt="" />
							<img style="width:0.42rem;" mode='widthFix' v-if="weatherData.info == '多云'" src="@/assets/icon/dataScreen3/dy.png" alt="" />
							<img style="width:0.42rem;" mode='widthFix' v-if="weatherData.info.indexOf('雨')!=-1" src="@/assets/icon/dataScreen3/y.png" alt="" />
							<img style="width:0.42rem;" mode='widthFix' v-if="weatherData.info == '晴'" src="@/assets/icon/dataScreen3/qing.png" alt="" />
						</div>
						<div class="flex-column">
							<div class="b1_weatherWrap">
								{{weatherData.temperature}}°
							</div>
							<div class="b2_weatherWrap">
								<!-- {{weatherData.temperature-5}}° ~ {{Number(weatherData.temperature)+5}}° {{weatherData.info}} -->
								{{weatherData.info}} {{weatherData.direct}}{{weatherData.power}}
							</div>
						</div>
						<div class="b3_weatherWrap flex-between">
							<div class="flex-column flex-center" style="margin-right:0.12rem">
								<img style="width:0.18rem;margin-bottom:0.02rem" mode='widthFix' src="@/assets/icon/dataScreen3/jy.png" alt="" />
								<div style="font-size:0.14rem;margin-bottom:0.05rem">降雨</div>
								<div>{{weatherData.wid}}</div>
							</div>
							<div class="flex-column flex-center" style="margin-right:0.12rem">
								<img style="width:0.24rem;margin-bottom:0.02rem" mode='widthFix' src="@/assets/icon/dataScreen3/sd.png" alt="" />
								<div style="font-size:0.14rem;margin-bottom:0.05rem">PM2.5</div>
								<div>{{weatherData.aqi}}</div>
							</div>
							<div class="flex-column flex-center">
								<img style="width:0.14rem;margin-bottom:0.02rem" mode='widthFix' src="@/assets/icon/dataScreen3/pm.png" alt="" />
								<div style="font-size:0.14rem;margin-bottom:0.05rem">湿度</div>
								<div>{{weatherData.humidity}}</div>
							</div>
						</div>
					</div>
				</div>
				<!-- <div>
					<div class="b27"></div>
				</div> -->
			</div>
			<div class="center">
				<div class="block5">
					<div class="flex-between flex-alignCenter">
						<div class="wrap2 flex-row " style="width:2.59rem">
							<img class="w1" mode='widthFix' src="@/assets/icon/dataScreen3/w1.png" alt="" />
							<div class="flex-row " style="position: absolute;right: 0.27rem;top:0.3rem">

								<div class="flex-column flex-alignCenter" style="margin-right:0.26rem">
									<div class="f14">83%</div>
									<div class="f13">污水收集率</div>
								</div>

								<div class="flex-column flex-alignCenter">
									<div class="f14">94%</div>
									<div class="f13">目标</div>
								</div>
							</div>
						</div>
						<div class="wrap2 flex-row " style="width:3.55rem">
							<img class="w1" mode='widthFix' src="@/assets/icon/dataScreen3/w2.png" alt="" />
							<div class="flex-row " style="position: absolute;right: 0.27rem;top:0.3rem">

								<div class="flex-column flex-alignCenter" style="margin-right:0.26rem">
									<div class="f14">74%</div>
									<div class="f13">污水设施问题按期处置率</div>
								</div>

								<div class="flex-column flex-alignCenter">
									<div class="f14">100%</div>
									<div class="f13">目标</div>
								</div>
							</div>
						</div>
						<div class="wrap2 flex-row " style="width:3.21rem">
							<img class="w1" mode='widthFix' src="@/assets/icon/dataScreen3/w3.png" alt="" />
							<div class="flex-row " style="position: absolute;right: 0.27rem;top:0.3rem">

								<div class="flex-column flex-alignCenter" style="margin-right:0.26rem">
									<div class="f14">85%</div>
									<div class="f13">污水设施巡查覆盖率</div>
								</div>

								<div class="flex-column flex-alignCenter">
									<div class="f14">100%</div>
									<div class="f13">目标</div>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="block6" v-if="block6_1">
					<div class="f31 cursor" @click="block6_1 = false">x</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">绑定设备：</div>
						<div class="f26">圣景汇美城网设备01</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">设备名称：</div>
						<div class="f26">水质检测仪01</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">COD传感器：</div>
						<div class="f26">100mg/L、Equiv、KHP、分辨率：0.1mg/L、精度±5%</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">氨氮传感器：</div>
						<div class="f26">20mg/L、精度±10%，分辨率：0.1mg/L</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">是否有水流出：</div>
						<div class="f26">是</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">漂浮物：</div>
						<div class="f26">未出现</div>
					</div>
					<div class="flex-row flex-alignCenter">
						<div class="f25">是否在线：</div>
						<div class="f26">在线</div>
					</div>
				</div>
				<div class="block6" v-if="block6_2" style="width: 4rem;">
					<div class="f31 cursor" @click="block6_2 = false">x</div>
					<div class="flex-between flex-center">
						<div class="f27">城南区-001摄像头</div>
						<div class="f28">当前时间: 2023-02-02 19:32:32</div>
					</div>
					<video width="100%" height="100%" controls autoplay style="margin-top:0.22rem">
						<!-- <source src="@/assets/icon/dataScreen/Area.mp4"> -->
						<source src="/api/profile/upload/2025/03/25/Area_20250325203947A002.mp4">
						您的浏览器不支持播放
					</video>
				</div>
			</div>
			<!-- <div class="block7 flex-column flex-alignCenter">
				<div class="f30">图例</div>
				<div class="f29"><img style="width:0.1rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen/zc.png" alt="" />正常</div>
				<div class="f29"><img style="width:0.1rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen/lx.png" alt="" />离线</div>
				<div class="f29"><img style="width:0.1rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen/bj.png" alt="" />报警</div>
			</div> -->

			<div class="right">
				<div class="block3">
					<div class="title flex-between">
						过程管理
						<div class="flex-row" style="margin-top:0.05rem">
							<div class="flex-justCenter " :class="b1ButtonIndex7==1?'b1':'b2'" @click="b1ButtonIndex7=1">近30天</div>
							<div class="flex-justCenter " :class="b1ButtonIndex7==2?'b1':'b2'" @click="b1ButtonIndex7=2">近90天</div>
							<div class="flex-justCenter " :class="b1ButtonIndex7==3?'b1':'b2'" @click="b1ButtonIndex7=3">全年</div>

						</div>
					</div>
					<div class="b6 flex-between flex-center">
						<div class="flex-row flex-alignCenter cursor">
							<img style="width:0.5rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/sj.png" alt="" />
							事件数量
						</div>
						<div class="f5">1,286件</div>
					</div>
					<div class="flex-row" style="margin-top:0.06rem;">
						<div @click="tkShow2 = true" class="flex-row flex-center b28 cursor" style="margin-right:0.13rem">
							<div class="flex-column flex-alignCenter">
								<div class="f4">河道水质异常</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">45</span>/53件</div>
							</div>
						</div>
						<div class="flex-row flex-center b28" style="margin-right:0.1rem">
							<div class="flex-column  flex-alignCenter">
								<div class="f4">市政污水井满溢</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">16</span>/27件</div>

							</div>
						</div>

					</div>
					<div class="flex-row" style="margin-top:0.0rem;">
						<div class="flex-row flex-center b28" style="margin-right:0.13rem">
							<div class="flex-column flex-alignCenter">
								<div class="f4">污水干管溢流</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">11</span>/31件</div>
							</div>
						</div>
						<div class="flex-row flex-center b28" style="margin-right:0.1rem">
							<div class="flex-column  flex-alignCenter">
								<div class="f4">污水处理厂满益</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">27</span>/38件</div>

							</div>
						</div>

					</div>

					<div class="flex-row" style="margin-top:0.0rem;">
						<div class="flex-row flex-center b28" style="margin-right:0.13rem">
							<div class="flex-column flex-alignCenter">
								<div class="f4">化粪池渗漏</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">36</span>/42件</div>
							</div>
						</div>
						<div class="flex-row flex-center b28" style="margin-right:0.1rem">
							<div class="flex-column  flex-alignCenter">
								<div class="f4">提升泵站停机</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">18</span>/29件</div>

							</div>
						</div>

					</div>

					<div class="flex-row" style="margin-top:0.0rem;">
						<div class="flex-row flex-center b28" style="margin-right:0.13rem">
							<div class="flex-column flex-alignCenter">
								<div class="f4">其他污水类型</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">29</span>/30件</div>
							</div>
						</div>
						<div class="flex-row flex-center b28" style="margin-right:0.1rem">
							<div class="flex-column  flex-alignCenter">
								<div class="f4">污水井盖异常</div>
								<div class="f3"><span style="font-size: 0.22rem;color: #45B2FF;">10</span>/18件</div>

							</div>
						</div>

					</div>

				</div>
				<div class="block4">
					<div class="title flex-between flex-alignCenter">
						<div>分析评估</div>
						<div class="flex-row" style="margin-top:0.05rem">
							<div class="flex-center " :class="b1ButtonIndex5==1?'ysgw1':'ysgw2'" @click="b1ButtonIndex5=1">高发统计</div>
							<div class="flex-center " :class="b1ButtonIndex5==2?'ysgw1':'ysgw2'" @click="b1ButtonIndex5=2">复盘分析</div>
						</div>
					</div>
					<div v-show="b1ButtonIndex5==1">
						<div class="flex-row flex-alignCenter" style="margin-top:0.2rem">
							<div class="b12"></div>
							<div class="f33">高发区域TOP3</div>
							<div class="f33_2">复发区域TOP3</div>
							<div class="y"></div>
							<div class="x" style="width:1.09rem"></div>
						</div>
						<div class="flex-column flex-alignCenter">
							<div class="b6_2 flex-between flex-center">
								<div class="flex-row flex-alignCenter " style="color:rgba(206, 218, 240, 1)">
									<div class="styleNO1 flex-center">
										1
									</div>
									北温泉街道
								</div>
								<div>13个/年</div>
							</div>
							<div class="b6_2 flex-between flex-center">
								<div class="flex-row flex-alignCenter " style="color:rgba(206, 218, 240, 1)">
									<div class="styleNO2 flex-center">
										2
									</div>
									东阳街道
								</div>
								<div>9个/年</div>
							</div>
							<div class="b6_2 flex-between flex-center">
								<div class="flex-row flex-alignCenter " style="color:rgba(206, 218, 240, 1)">
									<div class="styleNO3 flex-center">
										3
									</div>
									水土街道
								</div>
								<div>5个/年</div>
							</div>

						</div>
						<div class="flex-row flex-alignCenter" style="margin-top:0.2rem">
							<div class="b12"></div>
							<div class="f33">近一年高发时段统计</div>
							<div class="y"></div>
							<div class="x" style="width:1.09rem"></div>
						</div>

						<div class="flex-between" style="margin:0 auto;width:100%">
							<div id="mainPJJG" style="height:26vh;width:100%;margin-top:-4vh"></div>
						</div>
					</div>
					<div v-if="b1ButtonIndex5==2">

						<div class="b6 flex-between flex-center">
							<div class="flex-row flex-alignCenter cursor">
								<img style="width:0.5rem;margin-right:0.1rem" mode='widthFix' src="@/assets/icon/dataScreen3/ls.png" alt="" />
								历史抢险数量
							</div>
							<div class="f5">64件</div>
						</div>

						<div class="flex-row" style="margin-top:0.1rem">
							<div class="b23 flex-between flex-center" style="margin-right:0.1rem">
								<div style="margin-right:0.05rem">人工上报</div>
								<div><span style="font-size:0.2rem;color:#fff;margin-right:0.03rem">18</span>件</div>

							</div>
							<div class="b23 flex-between flex-center" style="margin-right:0.1rem">
								<div style="margin-right:0.05rem">线上汇聚</div>
								<div><span style="font-size:0.2rem;color:#fff;margin-right:0.03rem">20</span>件</div>

							</div>
							<div class="b23 flex-between flex-center">
								<div style="margin-right:0.05rem">在线感知</div>
								<div><span style="font-size:0.2rem;color:#fff;margin-right:0.03rem">23</span>件</div>

							</div>
						</div>
						<div class="flex-row flex-alignCenter" style="margin-top:0.1rem">
							<div class="b12"></div>
							<div class="f33">事件流转榜单</div>
							<div class="f33_2">响应速度榜单</div>
							<div class="y"></div>
							<div class="x" style="width:1.09rem"></div>
						</div>
						<div class="flex-column flex-alignCenter">

							<div class="b6_3 flex-row flex-alignCenter">
								<div style="margin-right:1rem">排名 </div>
								<div style="margin-right:1rem">镇街名称 </div>
								<div>事件流程数量 </div>
							</div>
							<div class="b6_4 flex-row flex-alignCenter">
								<div class="styleNO1 flex-center" style="margin-right:1rem">
									1
								</div>
								<div class="flex-row flex-alignCenter " style="color:rgba(206, 218, 240, 1);margin-right:1rem">

									水土街道
								</div>
								<div>54件</div>
							</div>
							<div class="b6_4 flex-row flex-alignCenter">
								<div class="styleNO1 flex-center" style="margin-right:1rem">
									2
								</div>
								<div class="flex-row flex-alignCenter " style="color:rgba(206, 218, 240, 1);margin-right:1rem">

									复兴街道
								</div>
								<div>42件</div>
							</div>
							<div class="b6_4 flex-row flex-alignCenter">
								<div class="styleNO2 flex-center" style="margin-right:1rem">
									3
								</div>
								<div class="flex-row flex-alignCenter " style="color:rgba(206, 218, 240, 1);margin-right:1rem">

									东阳街道
								</div>
								<div>31件</div>
							</div>
							<div class="b6_4 flex-row flex-alignCenter">
								<div class="styleNO3 flex-center" style="margin-right:1rem">
									3
								</div>
								<div class="flex-row flex-alignCenter " style="color:rgba(206, 218, 240, 1);margin-right:1rem">

									朝阳街道
								</div>
								<div>28件</div>
							</div>

						</div>
						<div class="flex-row flex-alignCenter" style="margin-top:0.1rem">
							<div class="b12"></div>
							<div class="f33">复盘改进</div>
							<div class="y"></div>
							<div class="x" style="width:1.77rem"></div>
							<div @click="tkShow3 = true" class="button4 flex-center cursor" style="width:1rem">险情复盘分析</div>
						</div>
						<div class="flex-row" style="margin-top:0.1rem">
							<div @click="tkShow4 = true" class="cursor b20 flex-between flex-center" style="margin-right:0.1rem">
								<div>内含事件复发率</div>
								<div><span style="font-size:0.22rem;color:#fff;margin-right:0.03rem">15</span>%</div>

							</div>
							<div @click="tkShow4 = true" class="cursor b20 flex-between flex-center">
								<div>舆情发生率</div>
								<div><span style="font-size:0.22rem;color:#fff;margin-right:0.03rem">12</span>%</div>

							</div>
						</div>

						<div class="flex-row" style="margin-top:0.2rem">
							<div style="margin-right: 0.4rem;margin-left: 0.1rem;" class="button3 flex-center cursor">
								短板提示
							</div>
							<div class="button3 flex-center cursor">
								导出报告
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="pop flex-center" v-if="tkShow" @click="tkShow = false">
				<!-- <div class="t1">教育系统自然灾害预警</div> -->
				<img class="tk" mode='widthFix' src="@/assets/icon/dataScreen3/tk.png" alt="" />
			</div>
			<div class="pop flex-center " v-if="tkShow2" @click="tkShow2 = false">
				<img class="tk" mode='widthFix' src="@/assets/icon/dataScreen3/tk2.png" alt="" />
			</div>
			<div class="pop flex-center" v-if="tkShow3" @click="tkShow3 = false">
				<img class="tk" mode='widthFix' src="@/assets/icon/dataScreen3/tk3.png" alt="" />
			</div>
			<div class="pop flex-center" v-if="tkShow4" @click="tkShow4 = false">
				<img class="tk" mode='widthFix' src="@/assets/icon/dataScreen3/tk4.png" alt="" />
			</div>
			<div class="flex-row bottomButton">
				<!-- button2 -->
				<div style="margin-right: 0.4rem;" class="button1 flex-center cursor">
					事件统计
				</div>
				<div class="button1 flex-center cursor">
					感知设备
				</div>

			</div>
		</div>

		<otherPlaces ref="otherPlaces"></otherPlaces>
		<messageDetail ref="messageDetail"></messageDetail>
		<findList ref="findList"></findList>
		<overlyDetailList ref="overlyDetailList"></overlyDetailList>
	</div>
</template>
<script>
var isInterval;
import MyOverlay from '@/components/common/dataScreen/sub/MyOverlay.vue';
import gridMap from '@/components/common/dataScreen/baiduMap';
import otherPlaces from '@/components/common/dataScreen/sub/otherPlaces';
import messageDetail from '@/components/common/dataScreen/sub/messageDetail';
import findList from '@/components/common/dataScreen/sub/findList';
import overlyDetailList from '@/components/common/dataScreen/sub/overlyDetailList';
// prettier-ignore
export default {
	components: {
		gridMap,
		MyOverlay,
		otherPlaces,
		messageDetail,
		findList,
		overlyDetailList,
	},
	data() {
		return {
			weatherData:{
				aqi: "52",
				direct: "东风",
				humidity: "36",
				info: "晴",
				power: "2级",
				temperature: "33",
				wid: "00",
			},
			creatTime:'14:25:52',
			bgMapStatus11List:[
				{bottom: '2.03rem',left: '2.09rem',name:'北碚污水处理厂',address:'北碚区嘉陵村67号',lat:'106.53207899999995',lng:'29.570905999999987',time:'2001.3',unit:'重庆市三峡水务有限责任公司',phone:'19922853676'},
				{bottom: '4.03rem',left: '5.09rem',name:'蔡家污水处理厂',address:'重庆市北碚区蔡家岗街道双碑村陡船沱社80号',lat:'106.46360100000004',lng:'29.729001',time:'2016.10.8',unit:'重庆市三峡水务有限责任公司',phone:'19922853676'},
				{bottom: '3.03rem',left: '2.09rem',name:'长滩污水处理厂',address:'北碚区龙凤街道长滩村',lat:'106.41435999999999',lng:'29.77285399999999',time:'2019.1.11',unit:'重庆市三峡水务有限责任公司',phone:'19922853676'},
			],
			bgMapStatus11List2:[
				{bottom: '2.03rem',left: '2.09rem',name:'歇马污水处理厂',address:'重庆市北碚区歇马镇桃园村84号',lat:'106.07645100000002',lng:'29.347460000000012',time:'2012.5',unit:'重庆市三峡水务有限责任公司',phone:'19922853676'},
				{bottom: '4.03rem',left: '5.09rem',name:'西山坪污水处理厂',address:'重庆市北碚区东阳街道西山坪70号',lat:'106.43016899999998',lng:'29.883242000000017',time:'2004.12',unit:'重庆市三峡水务有限责任公司',phone:'19922853676'},
				{bottom: '3.03rem',left: '2.3rem',name:'东阳污水处理厂',address:'北碚东阳街道',lat:'106.45080000000007',lng:'29.83281700000002',time:'2012年',unit:'重庆环投北部环境治理有限公司',phone:'17723115775'},
				{bottom: '3.5rem',left: '2.6rem',name:'澄江污水处理厂',address:'北碚区澄江镇',lat:'106.388',lng:'29.870',time:'2013年',unit:'重庆环投北部环境治理有限公司',phone:'17723115776'},
				{bottom: '4.3rem',left: '3.2rem',name:'静观污水处理厂',address:'北碚区静观镇',lat:'106.570',lng:'29.895',time:'2010年',unit:'重庆环投北部环境治理有限公司',phone:'17723115777'},
				{bottom: '6.2rem',left: '4.3rem',name:'柳荫污水处理厂',address:'北碚区柳荫镇',lat:'106.606',lng:'29.955',time:'2012年',unit:'重庆环投北部环境治理有限公司',phone:'17723115778'},
				{bottom: '2.2rem',left: '3.8rem',name:'金刀峡污水处理厂',address:'北碚金刀峡镇',lat:'106.656',lng:'29.999',time:'2009年',unit:'重庆环投北部环境治理有限公司',phone:'17723115779'},
				{bottom: '2.7rem',left: '1.4rem',name:'三圣污水处理厂',address:'北碚三圣镇',lat:'106.627',lng:'29.892',time:'2012年',unit:'重庆环投北部环境治理有限公司',phone:'17723115780'},
			],
			bgMapStatus11List3:[
				{bottom: '2.03rem',left: '2.09rem'},
				// {bottom: '4.03rem',left: '5.09rem'},
				// {bottom: '3.03rem',left: '2.3rem'},
				// {bottom: '3.5rem',left: '2.6rem'},
				// {bottom: '4.3rem',left: '3.2rem'},
				// {bottom: '6.2rem',left: '4.3rem'},
				// {bottom: '2.2rem',left: '3.8rem'},
				// {bottom: '2.7rem',left: '1.4rem'},
				// {bottom: '5.9rem',left: '4.5rem'},
				// {bottom: '4.4rem',left: '3.8rem'},
				// {bottom: '4.4rem',left: '5rem'},
			],
			bgMapStatus11List4:[
				{bottom: '2.03rem',left: '2.09rem'},
				{bottom: '4.03rem',left: '5.09rem'},
				{bottom: '3.03rem',left: '2.3rem'},
				{bottom: '3.5rem',left: '2.6rem'},
				{bottom: '4.3rem',left: '3.2rem'},
				{bottom: '6.2rem',left: '4.3rem'},
				{bottom: '2.2rem',left: '3.8rem'},
				{bottom: '2.7rem',left: '1.4rem'},
				{bottom: '5.9rem',left: '4.5rem'},
				{bottom: '4.4rem',left: '3.8rem'},
				{bottom: '4.4rem',left: '5rem'},
				{bottom: '2.03rem',left: '3.3rem'},
				{bottom: '3.03rem',left: '4.2rem'},
				{bottom: '4.4rem',left: '2rem'},
				{bottom: '2rem',left: '2.8rem'},
				{bottom: '3rem',left: '1.2rem'},
				{bottom: '4.8rem',left: '4.5rem'},
				{bottom: '6.3rem',left: '4.8rem'},
				{bottom: '3.2rem',left: '3.8rem'},
			],
			bgMapStatus11List5:[
				{bottom: '2.03rem',left: '2.09rem'},
				{bottom: '4.03rem',left: '5.09rem'},
				{bottom: '4.3rem',left: '3.2rem'},
				{bottom: '2.2rem',left: '3.8rem'},
				{bottom: '2.7rem',left: '1.4rem'},
				{bottom: '2.03rem',left: '3.3rem'},
				{bottom: '3.03rem',left: '4.2rem'},
				{bottom: '4.4rem',left: '2rem'},
				{bottom: '4.8rem',left: '4.5rem'},
			],
			bgMapStatus11List6:[
				
				{bottom: '3.5rem',left: '2.6rem'},
				
				{bottom: '3.03rem',left: '4.2rem'},
				{bottom: '4.4rem',left: '2rem'},
				{bottom: '2rem',left: '2.8rem'},
				{bottom: '3rem',left: '1.2rem'},
				{bottom: '3.2rem',left: '3.8rem'},
			],
			bgMapStatus11List7:[
				{bottom: '2.03rem',left: '2.09rem'},
				{bottom: '6.2rem',left: '4.3rem'},
				{bottom: '5.9rem',left: '4.5rem'},
				{bottom: '4.4rem',left: '3.8rem'},
				{bottom: '4.4rem',left: '5rem'},
				{bottom: '2.03rem',left: '3.3rem'},
				{bottom: '3.03rem',left: '4.2rem'},
				{bottom: '4.4rem',left: '2rem'},
				{bottom: '3rem',left: '1.2rem'},
				{bottom: '4.8rem',left: '4.5rem'},
			],
			bgMapStatus:0,
			//0事件统计 11污水处理厂-城市 12污水处理厂-乡镇 13污水处理厂-一体化设施  2提升泵站 3官网总公里数 4摄像头 5水位检测仪 6水位计
			b1ButtonIndex1:1,
			b1ButtonIndex2:1,
			b1ButtonIndex3:1,
			b1ButtonIndex4:1,
			b1ButtonIndex5:1,
			b1ButtonIndex6:1,
			b1ButtonIndex7:1,
			b1ButtonIndex8:1,
			b1ButtonIndex9:1,//管网
			b1ButtonIndex10:1,//设施
			b1ButtonIndex11:1,//设备
			b1ButtonIndex12:1,//河流
			b1ButtonIndex13:1,//其他
			tkShow:false,
			tkShow2:false,
			tkShow3:false,
			tkShow4:false,
			block6_1:false,
			block6_2:false,
			 polygonPath: [
				{lng: 106.412732, lat: 29.911707},
				{lng: 106.39455, lat: 29.910932},
				{lng: 106.403461, lat: 29.921336}
			],
			mapCenter: { lng: 106.445122, lat: 29.822616 },
			overlayList: [
				{ name: '城南新区摄像头01', lng: 106.445122, lat: 29.822616 ,type:0,select:true,},
				{ name: '城南新区摄像头02', lng: 106.555122, lat: 29.922616 ,type:1,select:false },
				{ name: '城南新区摄像头03', lng: 106.665122, lat: 29.722616 ,type:2,select:true },
			],
			activities: [
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-12 20:46',
				},
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-03 20:46',
				},
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-03 20:46',
				},
				{
					content:
						'百花村左滑坡0301001（裂缝），变形速率748.5mm/d，累计位移：770mm，触发橙色预警。',
					timestamp: '2018-04-03 20:46',
				},
			],
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						},
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						},
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						},
					},
				],
			},
			dataParams: {
				area: '', //地址名称
				date: '',
				// type: 0, //0是全部的（气象局加水利局）， 1是水利局
			},
			value: '',
			date: '',
			active: false,
			data: {
				data1: {},
				data2: {},
				data3: {},
				data4: {},
			},
			mpopIndex:0,
			optionPJJG :{
				 tooltip: {
					trigger: 'axis'
				},
				color:['#01D2FF','#FFA03A','#B070FF','#01D2FF'],
				// legend: {
				// 	data: ['响应时间','平均处置时长', '抢险总投入', '抢险满意度',],
				// 	textStyle: {
				// 	color: '#fff' 
				// }
				// },
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				
				xAxis: {
					type: 'category',
					boundaryGap: false,
					
				 	 axisLabel: {
						color: '#fff' ,
						
					},   
					data: ['2024.3', '5月', '7月', '9月', '9月','2025.1','3月']
				},
				yAxis: {
					min:0,
					max:24,
					// interval: 20,// 指定刻度间隔
					type: 'value',
					 axisLabel: {
						show:true,
						color: '#fff' ,
		
						 formatter: '{value} :00' ,// 在数值后添加单位 "kg"
					},
					
				},
				series: [
					{
					name: '', 
					type: 'line',
					stack: 'Total',
					smooth: true,
					data: [8, 16, 20, 5,8,16,18,10],
					
					},
					
					
				]
			},
			optionyjd: {
				title: {
					// text: '特性示例：渐变色 阴影 点击缩放',
					// subtext: '单位/个',
				},
				xAxis: {
					data: ['城中区'],
					title: '单位/个',
					axisLabel: {
						inside: false,
						color: '#fff',
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					z: 10,
				},
				yAxis: {
					name: '单位',
					nameTextStyle: {
						color: '#fff',
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLabel: {
						color: '#fff',
					},
				},
				dataZoom: [
					{
						type: 'inside',
					},
				],
				series: [
					{
						type: 'bar',
						itemStyle: {
							barBorderRadius: [100],
							color: new this.$echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{ offset: 0, color: '#00CCD2' },
									{ offset: 1, color: '#00A2FF' },
								]
							),
						},
						emphasis: {
							itemStyle: {
								color: new this.$echarts.graphic.LinearGradient(
									0,
									0,
									0,
									1,
									[
										{ offset: 0, color: '#00CCD2' },
										{ offset: 1, color: '#00A2FF' },
									]
								),
							},
						},
						data: [
							// 220, 182, 191, 234, 290, 330, 310, 123, 442, 321,
							// 90, 149, 210, 122, 133, 334, 198, 123, 125, 220,
						],
					},
				],
			},
			peopleData: {},
			cityList: [],
			option : {
					title: {
					text: 'Stacked Line'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				toolbox: {
					feature: {
					saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
					name: 'Email',
					type: 'line',
					stack: 'Total',
					data: [2,4,5,7,10,23,2]
					},
					{
					name: 'Union Ads',
					type: 'line',
					stack: 'Total',
					data: [220, 182, 191, 234, 290, 330, 310]
					},
					{
					name: 'Video Ads',
					type: 'line',
					stack: 'Total',
					data: [150, 232, 201, 154, 190, 330, 410]
					},
					{
					name: 'Direct',
					type: 'line',
					stack: 'Total',
					data: [320, 332, 301, 334, 390, 330, 320]
					},
					{
					name: 'Search Engine',
					type: 'line',
					stack: 'Total',
					data: [820, 932, 901, 934, 1290, 1330, 1320]
					}
				]
				},
		};
	},
	computed: { currentWeekday() {
      const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const date = new Date();
      return days[date.getDay()];
    }},
	activated() {
	},
	created() {
		this.isInterval  = setInterval(()=>{
			this.creatTime = new Date().format("hh:mm:ss")
		}, 1000)
		
		
		
	},
	mounted() {
		this.dataParams.date = new Date().format('yyyy-MM-dd');
		// this.dataParams.date = '2023-08-11';
	// this.creatChart1('main', 'option');
	this.creatChart1('mainPJJG', 'optionPJJG');


// 	var polygon = new BMapGL.Polygon([
//         new BMapGL.Point(116.387112,39.920977),
//         new BMapGL.Point(116.385243,39.913063),
//         new BMapGL.Point(116.394226,39.917988),
//         new BMapGL.Point(116.401772,39.921364),
//         new BMapGL.Point(116.41248,39.927893)
//     ], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
// map.addOverlay(polygon);
		this.init();

	
		

	},
	methods: {
		updatePolygonPath(){
			
		},
			messageDetailShow(data) {
			this.$refs.messageDetail.show();
			var params = [{},{},{},{}];
			setTimeout(() => {
				this.$refs.messageDetail.initData(params);
			}, 0);
		},
		overHidden(){
			console.log('点击标记物3');
			this.block6_1=false
			this.block6_2=false
		},
		overClick(e){
			console.log('点击标记物2', e);
			this.block6_1=!this.block6_1
			this.block6_2=!this.block6_2
			// this.$refs.overlyDetailList.show();
			// setTimeout(() => {
			// 	this.$refs.overlyDetailList.initData(e);
			// }, 0);
			
		},
			findListShow(type) {
			this.$refs.findList.show();
			var params = this.dataParams;
			params.type = type
			setTimeout(() => {
				this.$refs.findList.initData(params);
			}, 0);
		},
			otherPlacesShow(type,area) {
			this.$refs.otherPlaces.show();
			var params = this.dataParams;
			params.type = type
			params.area = area
			setTimeout(() => {
				this.$refs.otherPlaces.initData(params);
			}, 0);
		},
		setCenter() {
			this.mapCenter = { lng: 120.75523, lat: 28.714695 };
			this.overlayList = [
				{ name: '易发预警点', lng: 120.75523, lat: 28.714695 },
			];
		},
		mapReady(locationData) {
			return;
			console.log('locationData', locationData);
			let self = this;
			var map = new BMap.Map('allmap', {
				enableMapClick: false,
			});
			let point = new BMap.Point(120.65523, 28.014695);

			map.setMapType(BMAP_HYBRID_MAP);
			map.centerAndZoom(point, 15);
			// 地图比例尺
			map.addControl(
				new BMap.ScaleControl({
					anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
				})
			);
			// 鼠标滑动缩放
			map.enableScrollWheelZoom(true);
			// console.log(this.$refs.overlay0[0])
			// this.$refs.overlay0[0].draw()
		},
		init() {
			
			this.weather();
			
			// this.listArea_data();
		},
		initData() {
			
			//更换区域等需要重新加载
			this.earlyWarning_data();
			this.listArea_data();
			// this.findList_data_test();
			this.findNodeCount_data();
		},
		handleChange(value) {
			console.log(value);
			var cityList = this.cityList
			var mapCenter = { lng: 109.415953, lat: 24.325502 }
			this.dataParams.area = value[1];
			this.initData();
			if(value.length == 1){
				mapCenter = { lng: cityList[0].lng, lat: cityList[0].lat }
			}else{
				cityList[0].children.forEach(item=>{
					if(item.cityname == value[1]){
						mapCenter = { lng: item.lng, lat: item.lat }

					}
				})
			}
			console.log(123,mapCenter)
			this.mapCenter =mapCenter ;
		},
	
		findDiZhi_data(pageNum) {
			var params = this.dataParams;
			this.$myApi.findDiZhi_data(params).then((res) => {
				if (res.code == 200) {
					this.data.data3 = res.data;
				}
			});
		},
		find_data(pageNum) {
			var params = this.dataParams;
			this.$myApi.find_data(params).then((res) => {
				if (res.code == 200) {
					this.data.data2 = res.data;
				}
			});
		},
		findNodeCount_data(pageNum) {
			var params = this.dataParams;
			this.$myApi.findNodeCount_data(params).then((res) => {
				if (res.code == 200) {
					this.data.data3 = res.data;
				}
			});
		},
		listArea_data(pageNum) {
			var params = this.dataParams;
			this.$myApi
				.listArea_data_test(params)
				.then((res) => {
					if (res.code == 200) {
						var data = [];
						var data2 = [];
						res.data.forEach((item) => {
							data.push(item.earlyWarningList.length)
						});
						res.data.forEach((item) => {
							data2.push(item.areaName)
						});
						this.optionyjd.series[0].data = data;
						this.optionyjd.xAxis.data = data2;
						console.log('this.optionyjd',this.optionyjd)
						this.creatChart1('mainyjd', 'optionyjd');
					}
				})
				.catch(() => {});
		},
		// 去第一个学校点
		goSchool(){
			var overlayList = this.overlayList
						overlayList.forEach((item,index)=>{
							if(item.type == 3){
									this.mapCenter = { lng: item.lon, lat: item.lat };
								}
						})
		},
		// 去第一个易发点
		goYF(){
			var overlayList = this.overlayList
						overlayList.forEach((item,index)=>{
							if(item.type == 4){
									this.mapCenter = { lng: item.lon, lat: item.lat };
								}
						})
		},
		// 右上角点击标记物
		overSelect(type) {
			var params = this.dataParams;
			params.type = type

			var overlayList = this.overlayList
				overlayList.forEach((item,index)=>{
					if(item.type ==type){
						overlayList[index].select = true
					}else{

						overlayList[index].select = false
					}
					})
						console.log('sjkdl',overlayList,type)
						// this.$set(this.overlayList, 'fillColor', val);
						this.overlayList=overlayList
						// this.overlayList=[]
		},
		//更新标记物
		findList_data_test(type) {
			var params = this.dataParams;
			params.type = type
			// this.creatChart1('mainPJJG', 'optionfp');
			this.$myApi
				.findList_data_test(params)
				.then((res) => {
					if (res.code == 200) {
						this.mapCenter = { lng: res.data[0].lon, lat: res.data[0].lat };
						
							// res.data.yiFaDianList.forEach(item2=>{
							// let geom = item2.geom
							// geom = geom.substring(6)
							// geom = geom.substring(0,geom.length -1) 
							// geom = geom.split(' ') 

							// 		let lon=geom[0]
							// 		let lat=geom[1]
							// 		res.data.list.push({
							// 			formattedAddress:item2.szXian,
							// 			stationName:item2.szXiang,
							// 			type:4,
							// 			lat: lat,
							// 			lon: lon
							// 		})
							// })
							// console.log('zzz',overlayList)
						this.overlayList=res.data
						this.findListForDataScreen_school()
					}
				})
				.catch(() => {});
		},
		//学校列表
		findListForDataScreen_school(pageNum) {
			var params = this.dataParams;
			params.pageSize = 9999
			params.cityName = this.dataParams.area
			this.$myApi.findListForDataScreen_school(params).then((res) => {
				if (res.code == 200) {
					var overlayList = this.overlayList
						res.data.records.forEach((item2,index2)=>{
									overlayList.push({
										name:item2.schoolName,
										type:'3',
										id:item2.id,
										lat: item2.latitude,
										select : item2.earlyWarningList.length?true:false,
										lon: item2.longitude,
									})
								
							})
							console.log('ass',overlayList)
					this.overlayList=overlayList
					// this.findDiZhiYear_data()
				}
			});
		},
		//易发点列表
		findDiZhiYear_data(pageNum) {
		var params = this.dataParams;
			this.$myApi.findDiZhiYear_data(params).then((res) => {
				if (res.code == 200) {
					var overlayList = this.overlayList
						res.data.forEach((item2,index2)=>{
							let geom = item2.geom
							geom = geom.substring(6)
							geom = geom.substring(0,geom.length -1) 
							geom = geom.split(' ') 

									let lon=geom[0]
									let lat=geom[1]
									overlayList.push({
										formattedAddress:item2.szXian,
										stationName:item2.szXiang,
										
										type:4,
										lat: lat,
										lon: lon
									})
								
							})
							console.log('zzz',overlayList)
					this.overlayList=overlayList
					
				}
			});
		},
		//大屏数据
		earlyWarning_data(pageNum) {
			var params = this.dataParams;

			console.log(3333,'earlyWarning_data')
			// this.creatChart1('mainPJJG', 'optionfp');
			this.$myApi
				.earlyWarning_data_test(params)
				.then((res) => {
					if (res.code == 200) {
						console.log(444,'earlyWarning_data')
						// 饼图
						res.data.allCount =
							res.data.diZhiCount +
							res.data.shanHongCount +
							res.data.qiXiangCount ;
						var data1 =  JSON.parse(JSON.stringify(res.data)) 
						this.data.data1 = data1;
						// this.optionPJJG.series[0].data = [
						// 	{
						// 		value: res.data.qiXiangCount/res.data.allCount*100 || 0,
						// 		name: '极端天气',
						// 	},
						// 	{
						// 		value: res.data.diZhiCount/res.data.allCount*100 || 0,
						// 		name: '地质灾害',
						// 	},
						// 	{
						// 		value: res.data.shanHongCount/res.data.allCount*100 || 0,
						// 		name: '泥石流',
						// 	},
						// ];
						// this.creatChart1('mainPJJG', 'optionPJJG');
	console.log(555,'earlyWarning_data')
						//标记物
						if(res.data.list.length){

							this.mapCenter = { lng: res.data.list[0].lon, lat: res.data.list[0].lat };
						}
							
							res.data.list.forEach((item,index)=>{
								res.data.list[index].type = String(res.data.list[index].type)
								// res.data.list[index].select = res.data.list[index].earlyWarningList.length?true:false
							})

							console.log(321,'earlyWarning_data')
							//易发点标记
							res.data.yiFaDianList.forEach(item2=>{
								let geom = item2.geom
								geom = geom.substring(6)
								geom = geom.substring(0,geom.length -1) 
								geom = geom.split(' ') 

										let lon=geom[0]
										let lat=geom[1]
										res.data.list.push({
											formattedAddress:item2.szXian,
											stationName:item2.szXiang,
											typeName:item2.typeName,
											date:item2.date,
											schoolCount:item2.schoolCount,
											warnLevel:item2.warnLevel,
											type:'4',
											id:item2.id,
											select :item2.earlyWarningList.length?true:false,
											lat: lat,
											lon: lon,
											content:item2.szXian+item2.szXiang,
											name:item2.yhdType
										})
										
							})
							//学校点标记
							res.data.xuexiaoList.forEach((item2,index2)=>{
									res.data.list.push({
										name:item2.schoolName,
										type:'3',
										id:item2.id,
										lat: item2.latitude,
										select : item2.earlyWarningList.length?true:false,
										lon: item2.longitude,
									})
								
							})
							//气象 地质 山洪点标记
							var allList = [...res.data.qiXiangList,...res.data.shanHongList,...res.data.diZhiList,]
							allList.forEach(item2=>{

										res.data.list.push({
											formattedAddress:item2.formattedAddress,
											stationName:item2.stationName,
											typeName:item2.typeName,
											date:item2.date,
											schoolCount:item2.schoolCount,
											warnLevel:item2.warnLevel,
											type:'4',
											id:item2.id,
											select :false,
											lat: item2.lat,
											lon: item2.lon,
											content:item2.content,
											name:item2.typeName
										})
										
							})
							
							console.log('zzz',res.data.list)
						this.overlayList=res.data.list
							console.log(66,'earlyWarning_data')
						// this.findListForDataScreen_school()
					}
				})
				.catch(() => {});
		},
		creatChart1(idName, dataName) {
			console.log('creatChart1',idName, dataName,document.getElementById(idName))
			if(!document.getElementById(idName)){
				console.log('creatChart1',idName, dataName,'没找到元素')
				return
			}
			var myChart = this.$echarts.init(document.getElementById(idName));
			myChart.setOption(this[dataName], true);
			// console.log(myChart, this[dataName]);
		},
		weather(pageNum) {
			var params = this.dataParams;
			// var a = {"reason":"查询成功","result":{"future":[{"temperature":"17/31℃","weather":"晴转大雨","wid":{"night":"09","day":"00"},"direct":"南风转东南风","date":"2025-04-10"},{"temperature":"15/27℃","weather":"小雨","wid":{"night":"07","day":"07"},"direct":"北风","date":"2025-04-11"},{"temperature":"12/20℃","weather":"多云","wid":{"night":"01","day":"01"},"direct":"西南风转南风","date":"2025-04-12"},{"temperature":"13/25℃","weather":"多云","wid":{"night":"01","day":"01"},"direct":"南风转西南风","date":"2025-04-13"},{"temperature":"15/27℃","weather":"多云","wid":{"night":"01","day":"01"},"direct":"西南风转东风","date":"2025-04-14"}],"realtime":{"humidity":"36","temperature":"33","aqi":"52","wid":"00","info":"晴","power":"2级","direct":"东风"},"city":"北碚"},"error_code":0}
			// console.log('a',a)
			this.$myApi.weather(params).then((res) => {
				console.log('res',res)
				if (res.code == 200&&res.data.error_code==0) {
					this.weatherData = res.data.result.realtime
				}
			});
		},
		draw({ el, BMap, map }) {
			const pixel = map.pointToOverlayPixel(
				new BMap.Point(116.404, 39.915)
			);
			el.style.left = pixel.x - 60 + 'px';
			el.style.top = pixel.y - 20 + 'px';
		},
	},
};
</script>

<style  scoped >
.b23 {
	position: relative;
	background-size: 100% 100%;
	padding: 0.01rem 0.1rem;
	box-sizing: border-box;
	margin-bottom: 0.02rem;
	font-weight: 400;
	font-size: 0.16rem;
	color: #b5c6e6;
	white-space: nowrap;
	background: rgba(0, 55, 97, 0.6);
	border: 1px solid #289ec5;
}
.w1 {
	width: 0.85rem;
	position: absolute;
	left: 0.22rem;
	top: 0.17rem;
}
.x {
	width: 2.55rem;
	height: 1px;
	/* background: linear-gradient(90deg, #87aae8 0%); */
	background: linear-gradient(
		to right,
		rgba(135, 170, 232, 1),
		rgba(135, 170, 232, 0)
	);
}
.y {
	width: 0.06rem;
	height: 0.06rem;
	background: #87aae8;
	border-radius: 50%;
	margin-left: 0.14rem;
}
.bg {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}
.bgbg {
	width: 100%;
	height: 100%;
}
.bgMap {
	background-image: url('../../assets/icon/dataScreen/map.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 7.85rem;
	width: 6rem;
	position: absolute;
	top: 2.13rem;
}
.m4 {
	position: absolute;
	bottom: 2.6rem;
	left: 3.8rem;
	height: 0.3rem;
}
.m3 {
	position: absolute;
	bottom: 1.61rem;
	left: 2.38rem;
	height: 0.3rem;
}
.m2 {
	position: absolute;
	bottom: 3.7rem;
	left: 2.13rem;
	height: 0.3rem;
}
.m2 {
	position: absolute;
	bottom: 3.7rem;
	left: 2.13rem;
	height: 0.3rem;
}
.m1 {
	position: absolute;
	bottom: 3.03rem;
	left: 2.09rem;
	height: 0.3rem;
}
.mpop {
	position: absolute;
	top: -1.5rem;
	z-index: 2;
}
.mpop2 {
	position: absolute;
	top: -2.5rem;
	z-index: 2;
}
.mpF_Status11 {
	background: rgba(121, 99, 25, 1);
	font-size: 0.16rem;
	color: #ffffff;
	box-sizing: border-box;
	padding: 0.14rem;
	width: 1.96rem;
	height: 0.34rem;
}
.mpF2_Status11 {
	background: #322710;
	font-size: 0.16rem;
	color: #ffffff;
	box-sizing: border-box;
	padding: 0.07rem;
	border-radius: 0rem 0.04rem 0.04rem 0rem;
}
.mpF {
	background: #213e72;
	font-size: 0.16rem;
	color: #ffffff;
	box-sizing: border-box;
	padding: 0.14rem;
	width: 1.96rem;
	height: 0.34rem;
}
.mpF2 {
	background: rgba(22, 38, 68, 0.8);
	font-size: 0.16rem;
	color: #ffffff;
	box-sizing: border-box;
	padding: 0.07rem;
	border-radius: 0rem 0.04rem 0.04rem 0rem;
}
.mF {
	background: rgba(8, 18, 46, 0.8);
	font-size: 0.16rem;
	color: #ffffff;
	box-sizing: border-box;
	padding: 0 0.07rem;
	border-radius: 0rem 0.04rem 0.04rem 0rem;
}
.f33 {
	font-size: 0.2rem;
	color: #ffffff;
	margin-left: 0.08rem;
}
.f33_2 {
	font-size: 0.2rem;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 0.08rem;
}
.f31 {
	font-size: 0.12rem;
	color: #ffffff;
	position: absolute;
	right: 0.1rem;
	top: 0.05rem;
}
.f30 {
	font-size: 0.14rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 0.1rem;
}
.f29 {
	font-size: 0.12rem;
	color: #ffffff;
}
.block7 {
	width: 0.9rem;
	/* height: 0.94rem; */
	background: rgba(38, 151, 255, 0.4);
	box-shadow: 0px 2px 12px 0px rgba(0, 125, 227, 0.4);
	border: 1px solid rgba(0, 125, 227, 0.4);
	position: absolute;
	right: 5.2rem;
	bottom: 0.24rem;
	color: #fff;
}
.f28 {
	font-size: 0.12rem;
	color: #ffffff;
}
.f27 {
	font-size: 0.12rem;
	color: #ffffff;
	background: #0b789a;
	border: 1px solid #40c0e2;
	padding: 0.05rem 0.22rem;
}
.f26 {
	font-size: 0.12rem;
	color: #ffffff;
	margin-bottom: 0.08rem;
	max-width: 2.98rem;
}
.f25 {
	font-size: 0.12rem;
	color: #ffffff;
	margin-bottom: 0.08rem;
	width: 0.8rem;
}
.block6 {
	position: relative;
	display: inline-block;
	background: #0c283e;
	border-radius: 0px 0px 0px 0px;
	border: 4px solid #035abe;
	opacity: 0.89;
	padding: 0.14rem;
}
.z3 {
	width: 0.08rem;
	height: 0.08rem;
	background: #e8464c;
	margin-right: 0.05rem;
}
.z2 {
	width: 0.08rem;
	height: 0.08rem;
	background: #ffa647;
	margin-right: 0.05rem;
}
.z1 {
	width: 0.08rem;
	height: 0.08rem;
	background: #4aeaff;
	margin-right: 0.05rem;
}
.f24 {
	font-size: 0.14rem;
	color: #7dbdd5;
}
.f23 {
	font-size: 0.14rem;
	color: #7dbdd5;
}
.f22 {
	font-size: 0.18rem;
	color: #00d4ff;
}
.f21 {
	font-size: 0.16rem;
	color: #b5c6e6;

	white-space: nowrap;
}
.f20 {
	font-weight: bold;
	font-size: 0.24rem;
	color: #ffffff;

	white-space: nowrap;
}
.b12 {
	background-image: url('../../assets/icon/dataScreen3/b12.png');
	background-repeat: no-repeat;
	height: 0.24rem;
	width: 0.24rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
}
.b10 {
	background-image: url('../../assets/icon/dataScreen/b10.png');
	background-repeat: no-repeat;
	height: 1.16rem;
	width: 1.16rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
}
.b11 {
	background-image: url('../../assets/icon/dataScreen3/qq.png');
	background-repeat: no-repeat;
	height: 0.84rem;
	width: 0.72rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
	padding-left: 0.3rem;
	margin-right: 0.64rem;
}
.b9 {
	background-image: url('../../assets/icon/dataScreen/b9.png');
	background-repeat: no-repeat;
	height: 0.67rem;
	width: 0.95rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
}
.f19 {
	border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
	padding: 0.06rem;
	margin-right: 0.1rem;
	font-size: 0.12rem;
	color: #ffffff;
	background: rgba(232, 70, 76, 0.24);
	border: 0.01rem solid #e8464c;
}
.f18 {
	background: rgba(0, 241, 233, 0.24);
	border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
	border: 0.01rem solid #00f1e9;
	padding: 0.06rem;
	margin-right: 0.1rem;
	font-size: 0.12rem;
	color: #ffffff;
}
.f17 {
	font-size: 0.15rem;
	color: #ffffff;
}
.f16 {
	font-size: 0.2rem;
	color: #00f1e9;
}
.f15 {
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 0.14rem;
	color: #ffffff;
}
.f14 {
	font-weight: bold;
	font-size: 0.24rem;
	color: #ffffff;
}
.f13 {
	font-size: 0.16rem;
	color: #cedaf0;
	margin-top: 0.1rem;
}
.wrap2 {
	background-image: url('../../assets/icon/dataScreen3/b5.png');
	background-repeat: no-repeat;
	height: 1.21rem;
	width: 2.59rem;
	background-size: 100% 100%;
	margin-right: 0.05rem;
	margin-top: 0.1rem;
	position: relative;
}
.f12 {
	font-size: 0.14rem;
	color: #ffffff;
}
.f11_2 {
	font-weight: bold;
	font-size: 0.16rem;
	color: #ffffff;
	max-width: 3.35rem;
	/* text-overflow: ellipsis; */
	white-space: nowrap;
	overflow: hidden;
}
.f11 {
	font-weight: bold;
	font-size: 0.16rem;
	color: #ffffff;
	max-width: 2rem;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.f10 {
	background: #0244d2;
	border-radius: 0.04rem 0.04rem 0.04rem 0.04rem;
	border: 0.01rem solid #0244d2;
	padding: 0.06rem;
	margin-right: 0.1rem;
	font-size: 0.12rem;
	color: #ffffff;
}
.wrap1 {
	width: 100%;
	background: linear-gradient(0deg, #0b2a5d, #0a214d);
	border: 0.01px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 0.1rem;

	padding: 0.1rem;
	box-sizing: border-box;
}
.list {
	height: 1.44rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
	margin-top: 0.2rem;
}
.list::-webkit-scrollbar {
	display: none;
}
.f9 {
	font-weight: 400;
	font-size: 0.24rem;
	color: #00fff0;
}
.f8 {
	font-weight: 400;
	font-size: 0.24rem;
	color: #e7464c;
}
.f7 {
	font-weight: 400;
	font-size: 0.22rem;
	color: #feffff;
	margin-top: -0.14rem;
}
.f6 {
	font-weight: 400;
	font-size: 0.16rem;
	color: #ffffff;
}
.gridWrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, 1.2rem);
	grid-row-gap: 0.1rem;
	grid-column-gap: 0.4rem;
}
.b27 {
	width: 0.88rem;
	height: 0.88rem;
	background: #08254d;
	border: 0.01rem solid #2f4060;
}
.b21 {
	background-image: url('../../assets/icon/dataScreen3/b21.png');
	background-repeat: no-repeat;
	height: 0.44rem;
	width: 4.18rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.1rem;
	box-sizing: border-box;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 0.18rem;
	color: #ffffff;
	margin-top: 0.1rem;
}
.b8 {
	background-image: url('../../assets/icon/dataScreen3/b13.png');
	background-repeat: no-repeat;
	height: 1.05rem;
	width: 1.39rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.1rem;
	box-sizing: border-box;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 0.16rem;
	color: #e6f7ff;
}
.b8_2 {
	background-image: url('../../assets/icon/dataScreen3/b14.png');
	background-repeat: no-repeat;
	height: 1.05rem;
	width: 1.39rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.1rem;
	box-sizing: border-box;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 0.16rem;
	color: #e6f7ff;
}
.b8_3 {
	background-image: url('../../assets/icon/dataScreen3/b15.png');
	background-repeat: no-repeat;
	height: 1.05rem;
	width: 1.39rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.1rem;
	box-sizing: border-box;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 0.16rem;
	color: #e6f7ff;
}
.f3 {
	font-weight: 400;
	font-size: 0.2rem;
	color: #fefefe;
}
.f4 {
	font-weight: 400;
	font-size: 0.16rem;
	color: #b5c6e6;
}
.f5 {
	font-family: DIN;
	font-weight: bold;
	font-size: 0.26rem;
	color: #ffffff;
	background: linear-gradient(0deg, #89c1ff 0%, #ffffff 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.title {
	background-image: url('../../assets/icon/dataScreen3/title.png');
	background-repeat: no-repeat;
	font-weight: bold;
	font-size: 0.24rem;
	font-family: Source Han Sans CN;
	color: #b5c6e6;
	text-shadow: 0rem 0rem 0rem rgba(13, 41, 86, 0.8);
	/* -webkit-text-fill-color: transparent; */
	padding-left: 0.15rem;
	height: 0.42rem;
	width: 4.36rem;
	position: relative;
	background-size: 100% 100%;
	box-sizing: border-box;
}
.left {
	position: absolute;
	left: 0;
	top: 1rem;
}
.center {
	position: absolute;
	left: 5.29rem;
	top: 1rem;
}
.right {
	position: absolute;
	right: 0;
	top: 1rem;
}
.font1 {
	font-family: Digital Numbers, Digital Numbers;
	font-weight: 400;
	font-size: 0.24rem;
	color: #00fff0;
	position: relative;
	top: -0.08rem;
	margin-left: 0.1rem;
}
.font2 {
	font-family: Digital Numbers, Digital Numbers;
	font-weight: 400;
	font-size: 0.2rem;
	color: #ffffff;
	position: relative;
	top: -0.08rem;
	margin-left: 0.35rem;
}
.fpfx {
	background-image: url('../../assets/icon/dataScreen/fpfx.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.pjjg {
	background-image: url('../../assets/icon/dataScreen/pjjg.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.gzsb {
	background-image: url('../../assets/icon/dataScreen/gzsb.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.hjjh {
	background-image: url('../../assets/icon/dataScreen/hjjh.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.xxxj2 {
	background-image: url('../../assets/icon/dataScreen/xxxj2.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.38rem;
	/* width: 1.8rem; */
	display: inline-block;
	position: relative;
	background-size: 100% 100%;
	padding: 0rem;
	box-sizing: border-box;
	margin-top: 0.24rem;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.b20 {
	background-image: url('../../assets/icon/dataScreen3/b20.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.53rem;
	width: 2rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.01rem 0.1rem;
	box-sizing: border-box;
	margin-bottom: 0.02rem;
	font-weight: 400;
	font-size: 0.16rem;
	color: #b5c6e6;
	white-space: nowrap;
}
.b28 {
	background-image: url('../../assets/icon/dataScreen3/b28.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.78rem;
	width: 2.1rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.01rem 0.1rem;
	box-sizing: border-box;
	margin-bottom: 0.02rem;
	font-weight: 400;
	font-size: 0.16rem;
	color: #b5c6e6;
	white-space: nowrap;
}
.b19 {
	background-image: url('../../assets/icon/dataScreen3/b19.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.78rem;
	width: 2.04rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.01rem 0.1rem;
	box-sizing: border-box;
	margin-bottom: 0.02rem;
	font-weight: 400;
	font-size: 0.16rem;
	color: #b5c6e6;
	white-space: nowrap;
}
.b18 {
	background-image: url('../../assets/icon/dataScreen3/b18.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.27rem;
	width: 1.22rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.01rem 0.1rem;
	box-sizing: border-box;
	margin-bottom: 0.02rem;
	font-weight: 400;
	font-size: 0.16rem;
	color: #b5c6e6;
	white-space: nowrap;
}

.b17 {
	background-image: url('../../assets/icon/dataScreen3/b17.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.36rem;
	width: 4.31rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.2rem 0.6rem;
	box-sizing: border-box;
	margin-top: 0.13rem;
	font-size: 0.18rem;
	color: #ffffff;
}
.b6 {
	background-image: url('../../assets/icon/dataScreen3/b6.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.36rem;
	width: 4.31rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.2rem 0.6rem;
	box-sizing: border-box;
	margin-top: 0.13rem;
	font-size: 0.18rem;
	color: #ffffff;
}
.b6_2 {
	background-image: url('../../assets/icon/dataScreen3/b16.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 0.27rem;
	width: 4.15rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.1rem 0.37rem;
	box-sizing: border-box;
	margin-top: 0.2rem;
	font-size: 0.16rem;
	color: #ffffff;
}
.b6_3 {
	background: rgba(27, 67, 123, 0.9);
	border-radius: 0.02rem 0.02rem 0.02rem 0.02rem;
	width: 4.37rem;
	height: 0.32rem;
	position: relative;
	padding: 0.1rem 0.2rem;
	box-sizing: border-box;
	margin-top: 0.1rem;
	font-size: 0.16rem;
	color: #b5c6e6;
}
.b6_4 {
	background: radial-gradient(#0b2a5d 0%, #0a214d 100%);
	border: 0.01rem solid rgba(9, 59, 120, 1);
	width: 4.37rem;
	height: 0.36rem;
	position: relative;
	padding: 0.1rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 0.2rem; */
	font-size: 0.16rem;
	color: #b5c6e6;
}
.b22 {
	background: #123c70;
	border: 0.01rem solid #2c65c1;
	width: 1.34rem;
	height: 0.35rem;
	box-sizing: border-box;
	font-size: 0.16rem;
	color: #ffffff;
}
.b22_2 {
	background-image: url('../../assets/icon/dataScreen3/b22.png');
	background-repeat: no-repeat;
	/* background-color: rgba(0, 20, 52, 0.7); */
	width: 1.35rem;
	height: 0.35rem;
	position: relative;
	background-size: 100% 100%;
	font-size: 0.16rem;
	color: #ffffff;
	margin: 0;
}
.b222 {
	margin-top: -1px;
	width: 1.34rem;
	height: 0.82rem;
	background: #072c59;
	border: 1px solid #2c65c1;
	font-size: 0.2rem;
	color: rgba(69, 178, 255, 1);

	box-sizing: border-box;
}
.b222_2 {
	margin-top: -1px;
	width: 1.34rem;
	height: 0.82rem;
	background: rgba(0, 55, 97, 0.6);
	border: 1px solid #289ec5;
	font-size: 0.2rem;
	color: #45e3ff;

	box-sizing: border-box;
}
.jx1 {
	background-image: url('../../assets/icon/dataScreen3/b23.png');
	background-repeat: no-repeat;
	width: 0.94rem;
	height: 0.4rem;
	position: relative;
	background-size: 100% 100%;
	/* padding: 0.03rem 0rem;
	box-sizing: border-box; */
	cursor: pointer;
	font-size: 0.16rem;
	color: #ffffff;
	margin-left: -0.1rem;
}
.jx2 {
	background-image: url('../../assets/icon/dataScreen3/b24.png');
	background-repeat: no-repeat;
	width: 0.94rem;
	height: 0.44rem;
	position: relative;
	background-size: 100% 100%;
	/* padding: 0.03rem 0rem;
	box-sizing: border-box; */
	cursor: pointer;
	font-size: 0.16rem;
	color: #ffffff;
}
.jx3 {
	background-image: url('../../assets/icon/dataScreen3/b25.png');
	background-repeat: no-repeat;
	width: 0.94rem;
	height: 0.4rem;
	position: relative;
	background-size: 100% 100%;
	/* padding: 0.03rem 0rem;
	box-sizing: border-box; */
	cursor: pointer;
	font-size: 0.16rem;
	color: #ffffff;
	margin-left: -0.1rem;
}
.jx4 {
	background-image: url('../../assets/icon/dataScreen3/b26.png');
	background-repeat: no-repeat;
	width: 0.94rem;
	height: 0.44rem;
	position: relative;
	background-size: 100% 100%;
	/* padding: 0.03rem 0rem;
	box-sizing: border-box; */
	cursor: pointer;
	font-size: 0.16rem;
	color: #ffffff;
}
.b1 {
	background-image: url('../../assets/icon/dataScreen3/b1.png');
	background-repeat: no-repeat;
	height: 0.36rem;
	width: 0.66rem;
	position: relative;
	background-size: 100% 100%;
	font-size: 0.14rem;
	color: #ffffff;
	padding: 0.03rem 0rem;
	box-sizing: border-box;
	cursor: pointer;
}
.b2 {
	background-image: url('../../assets/icon/dataScreen3/b2.png');
	background-repeat: no-repeat;
	height: 0.36rem;
	width: 0.66rem;
	position: relative;
	background-size: 100% 100%;
	font-size: 0.14rem;
	color: #ffffff;
	padding: 0.03rem 0rem;

	box-sizing: border-box;
	cursor: pointer;
}
.ysgw1 {
	background-image: url('../../assets/icon/dataScreen3/button3.png');
	background-repeat: no-repeat;
	width: 0.76rem;
	height: 0.3rem;
	background: #123369;
	border-radius: 0.04rem;
	border: 0.01px solid #1460ad;
	position: relative;
	font-size: 0.14rem;
	color: #ffffff;
	cursor: pointer;
	margin-right: 0.1rem;
}
.ysgw2 {
	background: #123369;
	border-radius: 0.04rem;
	width: 0.76rem;
	height: 0.3rem;
	border: 0.01px solid #123369;
	position: relative;
	font-size: 0.14rem;
	color: #eee;
	cursor: pointer;
	margin-right: 0.1rem;
}
.block5 {
	height: 1.8rem;
	width: 8.63rem;
	position: relative;
	background-size: 100% 100%;
	/* padding: 0.1rem 0.2rem; */
	box-sizing: border-box;
	/* margin-top: 1vh; */
	/* margin-left: 0.1rem; */
}
.block1 {
	/* background-image: url('../../assets/icon/dataScreen/block1.png');
	background-repeat: no-repeat; */
	/* background-color: rgba(0, 20, 52, 0.7); */
	height: 25vh;
	/* width: 4.8rem; */
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	margin-bottom: 0.1rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}

.block1::-webkit-scrollbar,
.block2::-webkit-scrollbar,
.block2_2::-webkit-scrollbar,
.block3::-webkit-scrollbar,
.block4::-webkit-scrollbar {
	display: none;
}
.weatherWrap {
}
.b1_weatherWrap {
	width: 1.63rem;
	height: 0.48rem;
	background: #08254d;
	border: 0.01rem solid #2f4060;
	font-size: 0.22rem;
	padding: 0.1rem;
	box-sizing: border-box;
}
.b2_weatherWrap {
	width: 1.63rem;
	height: 0.4rem;
	background: #08254d;
	border: 0.01rem solid #2f4060;
	font-size: 0.16rem;
	padding: 0.1rem;
	box-sizing: border-box;
}
.b3_weatherWrap {
	width: 1.63rem;
	height: 0.88rem;
	background: #08254d;
	border: 0.01rem solid #2f4060;
	font-size: 0.18rem;
	padding: 0.1rem;
	box-sizing: border-box;
}
.qingWrap {
	width: 0.88rem;
	height: 0.88rem;
	background: linear-gradient(0deg, #3b93de 0%, #08254d 100%);
	border: 0.01rem solid #2f4060;
}

.timeWrap {
	position: absolute;
	left: 1.44rem;
	top: 0.14rem;
}
.datepicker {
	position: absolute;
	right: 2.1rem;
	top: 0.2rem;
}
.block2 {
	height: 42vh;
	margin-top: 0.1rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.block2_2 {
	height: 19vh;
	margin-top: 0.1rem;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.block3 {
	height: 39.5vh;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	margin-left: 0.1rem;
	margin-bottom: 0.1rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.block4 {
	height: 50vh;
	position: relative;
	background-size: 100% 100%;
	padding: 0.02rem 0.2rem;
	box-sizing: border-box;
	/* margin-top: 1vh; */
	margin-left: 0.1rem;
	overflow: scroll;
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;
	/* IE 10+ */
}
.bottomButton {
	position: absolute;
	left: 7.79rem;
	bottom: 0.64rem;
}
.button2 {
	height: 0.57rem;
	width: 1.59rem;
	background-image: url('../../assets/icon/dataScreen3/button2.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
	margin-right: 0.4rem;
}
.button1 {
	height: 0.57rem;
	width: 1.59rem;
	background-image: url('../../assets/icon/dataScreen3/button1.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-weight: bold;
	font-size: 0.2rem;
	color: #ffffff;
}
.button3 {
	height: 0.4rem;
	width: 1.78rem;
	background-image: url('../../assets/icon/dataScreen3/button3.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 0.18rem;
	color: #ffffff;
}
.styleNO1 {
	height: 0.3rem;
	width: 0.3rem;
	background-image: url('../../assets/icon/dataScreen3/1.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 0.16rem;
	color: #ffffff;
	font-weight: 700;
	margin-right: 0.05rem;
}
.styleNO2 {
	height: 0.3rem;
	width: 0.3rem;
	background-image: url('../../assets/icon/dataScreen3/2.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 0.16rem;
	color: #ffffff;
	font-weight: 700;
	margin-right: 0.05rem;
}
.styleNO3 {
	height: 0.3rem;
	width: 0.3rem;
	background-image: url('../../assets/icon/dataScreen3/3.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 0.16rem;
	color: #ffffff;
	font-weight: 700;
	margin-right: 0.05rem;
}
.button4 {
	height: 0.29rem;
	width: 1.18rem;
	background-image: url('../../assets/icon/dataScreen3/button3.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	font-size: 0.14rem;
	color: #ffffff;
}
.t1 {
	width: 100vw;
	padding-top: 0.05rem;
	text-align: center;
	font-weight: bold;
	font-size: 0.41rem;
	color: #ffffff;
	/* text-shadow: 0px 4px 7px rgba(13, 41, 86, 0.8); */
	background: linear-gradient(0deg, #ffffff 0%, #aaaaaa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.top {
	/* height: 1rem; */
	height: 9.2vh;
	width: 100vw;
	background-image: url('../../assets/icon/dataScreen3/top2.png');
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	/* background-position: center; */
}
.pop {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
}
.tk {
	height: 60%;
	width: auto;
	position: relative;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	z-index: 3;
}
.cursor {
	cursor: pointer;
}
.content {
	z-index: 2000;
	/* min-height: 100vh; */
	/* width: 100vw; */
	overflow-x: hidden;
	/* background: #000; */
	box-sizing: border-box;
	/* position: relative; */
}
.map {
	height: 100vh;
	width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
}
.sample {
	color: #fff;
	text-align: center;
	padding: 10px;
	position: absolute;
	width: 5rem;
	height: 4rem;
}
.sample.active {
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
}
.backgrountMap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100vw;
}
#allmap {
	width: 100%;
	height: 100%;
}
.page {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}
</style>
<style>
.el-date-editor .el-range-separator {
	color: #fff;
}
.el-date-editor .el-range-input {
	background: RGBA(9, 39, 78, 1);
	color: #fff;
}
.el-timeline-item__content {
	background: rgba(255, 255, 255, 0.1);
	padding: 0.18rem;
}
.el-timeline-item__timestamp {
	font-size: 0.18rem;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #ffffff;
}
.el-input__inner {
	background: RGBA(9, 39, 78, 1) !important;
	font-size: 0.16rem !important;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(255, 255, 255, 1) !important;
	border: 1px solid #293246 !important;
	border-radius: 0.24rem 0.24rem 0.24rem 0.24rem !important;
}
.el-date-editor.el-input {
	border-radius: 0.24rem 0.24rem 0.24rem 0.24rem;
	width: 2rem !important;
}
html {
	/* 移动端设计图 */
	/* 100vw = 750px
        1px = 100/750 vw  =0.13333vw
        100px = 13.33vw
        1rem = 1font-size
        font-size: 13.33vw 以100px为单位 
        font-size不能小于12px 否则qq uc浏览器等会按照12px计算
     */
	/* font-size: 13.33vw; */

	/* 网页端设计图 */
	/* 100vw = 1920px
        1px = 100/1920 vw  =0.052083333333vw
        100px = 5.20vw
        1rem = 1font-size
        font-size: 5.20vw 以100px为单位 
        font-size不能小于12px 否则qq uc浏览器等会按照12px计算
     */

	font-size: 5.2vw;
}
</style>
